<template>
  <el-dialog
    v-model="visible"
    :title="$t('shop.reviewSignCategoriesApply')"
    :close-on-click-modal="false"
    class="component-sign-add-or-update"
  >
    <!-- 申请签约的类目/品牌列表 -->
    <div class="main-container">
      <div class="table-con">
        <!-- 类目 -->
        <el-table
          ref="shopSignTable"
          :data="dataList"
        >
          <el-table-column
            prop="name"
            :label="$t('shopProcess.category')"
            align="center"
          />
          <el-table-column
            prop="parentName"
            :label="$t('shopProcess.parentCategoryName')"
            align="center"
          />
          <el-table-column
            prop="platformRate"
            :label="$t('shopProcess.categoryRate')"
            align="center"
          >
            <template #default="{ row }">
              <div v-if="row.customizeRate || row.customizeRate === 0 || row.platformRate || row.platformRate === 0">
                <span v-if="row.customizeRate === null">{{ row.platformRate }} %</span>
                <span v-else>{{ row.customizeRate }} %</span>
              </div>
              <div v-else>
                --
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="qualifications"
            :label="$t('shopProcess.categoryQualifications')"
            align="center"
          >
            <template #default="{row}">
              <div
                v-if="row.imgs && row.imgs.length"
                class="img-box"
              >
                <el-image
                  v-for="(img,index) in row.imgs"
                  :key="index"
                  class="rotating-img"
                  :src="checkFileUrl(img)"
                  :preview-src-list="checkFileUrl(row.imgs)"
                  preview-teleported
                />
              </div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryStatus"
            :label="$t('shopProcess.categoryStatus')"
            align="center"
          >
            <template #default="scope">
              <div
                v-if="scope.row.categoryStatus === 1"
                class="tag-txt"
              >
                {{ $t('publics.normal') }}
              </div>
              <div
                v-if="scope.row.categoryStatus === 0"
                class="tag-txt red-tag-txt"
              >
                {{ $t('publics.LowerShelf') }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 审核 -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="auto"
      size="small"
      @submit.prevent
    >
      <el-form-item
        :label="$t('distributionMsg.auditStatus')"
        prop="status"
      >
        <el-radio-group v-model="dataForm.status">
          <el-radio
            :label="0"
            :disabled="true"
          >
            {{ $t("shop.notReviewed") }}
          </el-radio>
          <el-radio :label="1">
            {{ $t("shop.passed") }}
          </el-radio>
          <el-radio :label="-1">
            {{ $t("shop.notPass") }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="dataForm.status === -1"
        :label="$t('components.denialReason')"
        prop="remarks"
      >
        <el-input
          v-model="dataForm.remarks"
          maxlength="50"
          show-word-limit
          type="textarea"
          :placeholder="$t('components.denialReason')"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t("remindPop.cancel") }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="dataFormSubmit()"
        >
          {{ $t("remindPop.confirm") }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const dataList = ref([])
const platformBrandList = ref([]) // 平台品牌
const customizeBrandList = ref([]) // 自定义品牌

// 审核
const dataForm = reactive({
  shopId: 0,
  status: 0, // 0 未审核 1已通过 -1未通过 不传返回全部
  remarks: '',
  type: 1 // 1类目 2品牌
})

const dataFormRef = ref(null)
const init = (id, type) => {
  visible.value = true
  dataForm.shopId = id
  dataForm.type = type // 1类目 2品牌
  nextTick(() => {
    dataFormRef.value.resetFields()
    dataList.value = []
    platformBrandList.value = []
    customizeBrandList.value = []
    getDataList()
  })
}

/**
 * 获取签约的分类列表（状态参数为空则返回所有）
 */
const getDataList = () => {
  // status 0 未审核 1已通过 -1未通过 不传返回全部
  http({
    url: http.adornUrl('/prod/category/signingInfoByShopId'),
    method: 'get',
    params: http.adornParams({
      shopId: dataForm.shopId,
      status: dataForm.status
    })
  }).then(({ data }) => {
    dataList.value = data
  })
}

// 审核
const dataFormSubmit = () => {
  if (dataForm.status === 0) {
    ElMessage({
      message: $t('distributionMsg.tip2'),
      type: 'error',
      duration: 1000
    })
    return
  }
  if (dataForm.status === -1 && (!dataForm.remarks || !dataForm.remarks.trim())) {
    ElMessage({
      message: $t('shopProcess.notApprovedReason'),
      type: 'error',
      duration: 1000
    })
    return
  }
  http({
    url: http.adornUrl('/platform/signingAuditing/audit'),
    method: 'PUT',
    data: dataForm
  }).then(() => {
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1000,
      onClose: () => {
        visible.value = false
        emit('refreshDataList')
      }
    })
  })
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.component-sign-add-or-update {
  & :deep(.el-dialog__body) {
    padding-top: 20px;
  }
  .main-container {
    padding: 0;
    margin-top: 0;
    & :deep(.el-table__body-wrapper) {
      max-height: 350px;
      overflow-y: auto;
    }
    & :deep(.img-box) {
      text-align: center;
    }
    .rotating-img {
      display: inline-block;
      width: 60px;
      height: 60px;
    }
    .rotating-img:not(:last-child) {
      margin-right: 5px;
    }
  }
}
</style>
